<template>
  <div class="">
    <Navs left></Navs>
    <div class="ding-count">
        <div>
          <div class="count-item">{{dingcounts.day}}天</div>
          <div>累计签到</div>
        </div>
        <div>
          <div class="count-item">{{dingcounts.jinbi}}金币</div>
          <div>累计奖励</div>
        </div>
    </div>

    <Main
      pt
      pb
    >
      <div class="main_list">
        <div class="list_header">签到明细</div>
        <div class="list_content">
          <van-pull-refresh
            v-model="isLoading"
            @refresh="onRefresh"
            class="refresh-main"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              v-if="nolist"
            >
              <div
                class="content_item"
                v-for="(item,index) in list"
                :key="index"
              >
                <div class="fl">
                  <div class="fl_type">签到</div>
                  <div class="fl_datetime">{{item.time}}</div>
                </div>
                <div class="fr">
                  <div class="fr_type">赠送资产</div>
                  <div class="fr_amt minus">+{{item.je}}</div>
                </div>
              </div>
            </van-list>
            <nolist v-else></nolist>
          </van-pull-refresh>
        </div>
      </div>
    </Main>

  </div>
</template>

<script type="text/ecmascript-6">
import { user } from "@/api";
import nolist from "@/components/common/nolist";
export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      isLoading: false,
      page: 1,
      nolist: true,
      dingcounts:{
        day:"",
        jinbi:""
      }
    };
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {
    this.assetsList();
    this.count();
  },
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {
    nolist
  },
  //执行方法
  methods: {
    assetsList() {
      user.monding({ page: this.page }).then(res => {
        if (res.code == 1000) {
          if (Number(res.count) != 0) {
            this.list = [...this.list, ...res.result];
            this.loading = false;
            this.nolist = true;
            if (this.list.length == Number(res.count)) {
              this.finished = true;
            }
          } else {
            this.list = [];
            this.nolist = false;
            this.loading = false;
            this.finished = true;
          }
        }
      });
    },
    onLoad() {
      this.page += 1;
      this.assetsList();
    },
    onRefresh() {
      this.nolist = true;
     
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.assetsList();  
         this.loading = true;
      }, 500);
      this.page = 1;
      this.list = [];
      this.loading = false;
    },
    count() {
      user.dingcount().then(res => {
        if(res.code==1000){
          this.dingcounts.day=res.result.sumday;
          this.dingcounts.jinbi=res.result.sumjf;
        }
      });
    }
  },
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.list_content {
  height: calc((100vh - 11.125rem));
  overflow: auto;
}
.ding-count{
  padding-top:46px;
  display: flex;
  align-items: center;
  text-align: center;
  background:#fff;
  margin-bottom: 10px;
  padding:66px 0 20px ;
  &>div{
    flex: 1;
    
  }
  .count-item{
    color:#000;
  }
}
.main_list {
  width: 100%;
  background-color: #fff;

  .list_header {
    box-sizing: border-box;
    height: 80/32rem;
    font-size: 26/32rem;
    line-height: 80/32rem;
    padding-left: 28/32rem;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
  }

  .content_item {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 120/32rem;
    padding: 18/32rem 28/32rem;
    border-bottom: 1px solid #efefef;
    justify-content: space-between;
    .fl {
      text-align: left;

      .fl_type {
        font-size: 30/32rem;
        line-height: 48/32rem;
        color: #212121;
      }

      .fl_datetime {
        font-size: 26/32rem;
        color: #999999;
      }
    }

    .fr {
      text-align: right;

      .fr_type {
        font-size: 26/32rem;
        line-height: 38/32rem;
        color: #212121;
      }

      .fr_amt {
        font-size: 32/32rem;
        line-height: 45/32rem;
        color: #212121;

        &.minus {
          color: #e83626;
        }
      }
    }
  }

}
</style>
